<script setup lang="ts">
import { onMounted, ref, watch, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps<{
	options: Object;
}>();

const myEchartsDf = ref();
let myChart: any = null;
function onResize() {
	myChart && myChart.resize();
	// console.log("重新获取页面大小");
}

onMounted(() => {
	myChart = echarts.init(myEchartsDf.value);
	if (!props.options) return;
	myChart && myChart.setOption(props.options);
	window.addEventListener('resize', onResize);
});

watch(
	() => props.options,
	(newVal) => {
		if (newVal) {
			myChart && myChart.setOption(newVal);
			onResize();
		}
	},
	{ immediate: true, deep: true }
);

onUnmounted(() => {
	myChart.value = null;
	myEchartsDf.value = null;
	window.addEventListener('resize', () => {});
});
</script>
<template>
	<div ref="myEchartsDf" style="width: 100%; height: 100%; overflow: hidden"></div>
</template>
